@import './reset';
::-webkit-input-placeholder { color:#999; }
body{
	background: white;
}
.container{
	width: 100%;
	background: white;
	overflow: hidden;
	box-sizing: border-box;
	/*padding-bottom: calculateRem(72px);*/
	.top-bar{
		width: 100%;
		height: calculateRem(140px);
		>img{
			width: 100%;
			height: 100%;
		}
	}
	.middle-wrap{
		width: 100%;
		height: auto;
		/*overflow: hidden;*/
		background: #f5f8fa;
		padding-bottom: calculateRem(16px);
		box-sizing: border-box;
		.time-bar{
			width: 100%;
			height: calculateRem(38px);
			padding-top: calculateRem(12px);
			.time-inner{
				width: calculateRem(248px);
				height: calculateRem(38px);
				box-sizing: border-box;
				border: 1px solid #bcc4ca;
				border-radius: 2px;
				line-height:calculateRem(36px);
				margin: 0 auto;
				background: white; 
				>img{
					width: calculateRem(18px);
					height: calculateRem(18px);
					vertical-align: sub;
					margin-left: calculateRem(30px);
					/*margin-right: calculateRem(20px);*/
				}
				>input[type='text']{
					width: 70%;
					box-sizing: border-box;
					height: calculateRem(34px);
					font-size: calculateRem(17px);
					line-height: calculateRem(34px);
					color: black;
					border: 0;
					text-indent: calculateRem(30px);
				}
			}
		}
		.top-nav{
			width: 100%;
			height: calculateRem(29px);
			margin-top: calculateRem(24px);
			position: relative;
			.nav-wrap{
				width: calculateRem(220px);
				height: calculateRem(29px);
				line-height: calculateRem(27px);
				box-sizing: border-box;
				border-radius: calculateRem(4px);
				border: 1px solid #757e85;
				color: #7d868c;
				margin: 0 auto;
				font-style: 0;
				overflow: hidden;
				background: white;
				.nav{
					display: inline-block;
					width: 49%;
					height: calculateRem(27px);
					background: white;
					text-align: center;
					font-size: calculateRem(15px);
					&:nth-child(1){
						float: left;
					};
					&:nth-child(2){
						float: right;
					};
				}
				.active{
					background: #757e85;
					color: white;

				}

			}
			.ques{
				position: absolute;
				width: calculateRem(18px);
				height: calculateRem(18px);
				background: url(../images/question_icon@2x.png) no-repeat;
				background-size: 100%;
				top: calculateRem(5px);
				right: calculateRem(16px);
				&:active{
					background: #ddd url(../images/question_icon@2x.png) no-repeat;
					background-size: 100%;
				};


			}

			.pop-dialog{
				display: none;
				position: absolute;
				z-index: 100;
				/*width: calculateRem(300px);*/
				right: calculateRem(6px);
				left: calculateRem(50px);
				top: calculateRem(39px);
				height: auto;
				min-height: calculateRem(80px);
				/*max-height: calculateRem(137px);*/

				/*position: fixed;
				top: calculateRem(252px);
				right: calculateRem(6px);
				left: calculateRem(50px);*/
				background: rgba(17,26,35,0.9);
				/*box-shadow: 0 3px 0 0 rgba(0,15,26,0.08);*/
				border-radius: calculateRem(3px);
				box-sizing: border-box;
				padding: calculateRem(15px) calculateRem(16px);
				&:before{
					content: '';
					background: url(../images/up_icon@2x.png) no-repeat;
					width: calculateRem(18px);
					height: calculateRem(10px);
					background-size: 100%;
					position: absolute;
					top: calculateRem(-9px);
					right: calculateRem(10px);
					/*top: calculateRem(-10px);
					right: calculateRem(10px);*/

				};

				.dialog-content{
					width: 100%;
					height: auto;
					max-height: calculateRem(150px);
					line-height: calculateRem(18px);
					font-size: calculateRem(13px);
					color: white;
					overflow-y: auto;
				}

			}
		}
	}

	.bottom-blank{
		/*position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: calculateRem(259px);*/
		width: 100%;
		height: auto;
		background: white;
		z-index: 10;
		overflow-y: auto;
		box-sizing: border-box;
		padding-bottom: calculateRem(62px);
		.stock-page{
			width: 100%;
			height: auto;
			.stock-item{
				width: 100%;
				height: auto;
				box-sizing: border-box;
				border-bottom: 1px solid #e1e7eb;
				padding: calculateRem(20px) calculateRem(16px) calculateRem(22px);
				overflow: hidden;
				.title{
					width: 100%;
					height: calculateRem(24px);
					line-height: calculateRem(24px);
					font-size: calculateRem(17px);
					color: #333333;
					font-weight: bold;
					@include ell;
				}
				.numbers-box{
					width: 100%;
					height: calculateRem(42px);
					margin-top: calculateRem(14px);
					.num-l{
						width: 60%;
						height: calculateRem(42px);
						box-sizing: border-box;
						border-right: 1px solid #c4cbcf;
						float: left;
						font-size: 0;
						.item{
							display: inline-block;
							width: 50%;
							height: calculateRem(42px);
							.num{
								width: 100%;
								height: calculateRem(26px);
								line-height: calculateRem(26px);
								font-size: calculateRem(20px);
								color: #2C3338;
							}
							.txt{
								font-size: calculateRem(13px);
								color: #818B91;
								line-height: calculateRem(18px);
							}
						}
					}
					.num-r{
						width: 39%;
						height: calculateRem(42px);
						float: right;
						box-sizing: border-box;
						padding-left: calculateRem(10px);
						.ref,.new{
							width: 100%;
							height: calculateRem(21px);
							line-height: calculateRem(21px);
							font-size: calculateRem(13px);
							color: #818B91;
							>span{
								font-size: calculateRem(15px);
								color: #2C3338;
								margin-left: calculateRem(6px);
							}
						}
					}
				}
				.red{
					color: #EB1F10!important;
				}
				.green{
					color: #10A615!important;
				}
			}
			.empty{
				width: 100%;
				height: auto;
				overflow: hidden;
				text-align: center;
				>img{
					width: calculateRem(60px);
					height: calculateRem(60px);
					margin-top: calculateRem(80px);

				}
				>p{
					font-size: calculateRem(16px);
					color: #5C656B;
					margin-top: calculateRem(18px);

				}
			}

			.stocks-wrap{
				width: 100%;
				height: auto;
				.title{
					width: 100%;
					height: calculateRem(36px);
					background: #f5f8fa;
					box-sizing: border-box;
					padding: 0 calculateRem(16px);
					.cell{
						height: calculateRem(36px);
						line-height: calculateRem(36px);
						color: #687278;
						font-size: calculateRem(14px);
					}
				}
				.stock-cell{
					background: white;
					width: 100%;
					height: calculateRem(54px);
					box-sizing: border-box;
					padding: 0 calculateRem(16px);
					&:active{
						background: #ebeff2;
					};
					.stock-inner{
						width: 100%;
						height: calculateRem(54px);
						border-bottom: 1px solid #f7f8f9;
						.ele{
							height: calculateRem(53px);
							color: #2C3338;
							font-size: calculateRem(18px);
							line-height: calculateRem(53px);
							@include ell;
							.name{
								width: 100%;
								height: calculateRem(26px);
								line-height: calculateRem(29px);
								color: black;
								font-weight: bold;
								font-size: calculateRem(15px);
								margin-top: calculateRem(4px);
								@include ell;
							}
							.num{
								width: 100%;
								height: calculateRem(20px);
								line-height: calculateRem(20px);
								font-size: calculateRem(13px);
								color: #757E85;
								@include ell;

							}

						}

					}
				}
				.col-1{
					width: 50%;
					float: left;
				}
				.col-2{
					width: 25%;
					float: left;
					text-align: center;
				}
				.col-3{
					width: 25%;
					float: left;
					text-align: right;
				}
			}
		}
	}

	.footer{
		position: fixed;
		z-index: 20;
		left: 0;
		right: 0;
		bottom: 0;
		height: calculateRem(60px);
		background: white;
		box-sizing: border-box;
		padding: 0 calculateRem(10px);
		.sign{
			width: 100%;
			height: calculateRem(50px);
			line-height: calculateRem(50px);
			color: white;
			text-align: center;
			font-size: calculateRem(20px);
			box-sizing: border-box;
			background: #E62622;
			border-radius: calculateRem(5px);
			@include ell;
			&:active{
				background:#C51B0D;
			};
		}
	}

	.select-product-mask{
		position: fixed;
		background: rgba(0,15,25,.6);
		z-index: 200;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: none;
		.select-product-dialog{
			position: absolute;
			bottom: calculateRem(10px);
			left: calculateRem(10px);
			right: calculateRem(10px);
			border-radius: calculateRem(13px);
			/*height: calculateRem(290px);*/
			height: auto;
			/*height: auto;
			max-height:  calculateRem(284px);*/
			background: #F3F5F8;
			box-sizing: border-box;
			padding: calculateRem(26px) calculateRem(16px) calculateRem(10px);
			>h3{
				margin: 0;
				text-align: center;
				font-size: calculateRem(20px);
				color: #14171A;
				line-height: calculateRem(28px);
				font-weight: normal;
				margin-bottom: calculateRem(24px);
				/*margin-top: calculateRem(18px);*/
			}
			.products-wrap{
				width: 100%;
				height: auto;
				.product{
					width: 100%;
					height: auto;
					box-sizing: border-box;
					border-radius: calculateRem(3px);
					padding: calculateRem(12px);
					margin-bottom: calculateRem(8px);
					/*border: 1px solid #818B91;
					background: #f7f9fa;*/
					border: 1px solid #d6dbde;
					background: white;
					position: relative;
					&:after{
						content: '';
						display: block;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						top: 0;
						background: rgba(255,255,255,.6);
						box-sizing: border-box;
					};
					.title{
						width: 100%;
						height: calculateRem(26px);
						font-size: calculateRem(18px);
						color: #000F1A;
						font-weight: bold;
						@include ell;
						margin-bottom: calculateRem(10px);
						>span{
							font-size: calculateRem(15px);
							color: #EB1F10;
							font-weight: normal;
							margin-left: calculateRem(8px);
						}
						>i{
							display: inline-block;
							width: calculateRem(13px);
							height: calculateRem(14px);
							margin-left: calculateRem(8px);
							>img{
								width: 100%;
								height: 100%;

							}
						}
					}
					.funcs{
						width: 100%;
						height: auto;
						>span{
							font-size: calculateRem(13px);
							display: inline-block;
							height: calculateRem(20px);
							line-height: calculateRem(20px);
							border-radius: calculateRem(2px);
							color: #2C3338;
							border: 1px solid #a0aeb7;
							padding: 0 calculateRem(4px);
						}
						>i{
							display: inline-block;
							color: #2c3338;
							font-size:calculateRem(14px);
						}
					}

				}
				.active{
					border: 1px solid #EB1F10;
					&:after{
						display: none;
					};
					
				}
			}
			.close-btn{
				width: calculateRem(32px);
				height: calculateRem(32px);
				position: absolute;
				top: calculateRem(-47px);
				right: calculateRem(15px);
				border-radius: 50%;
				&:after{
					content: '';
					display: block;
					width: 2px;
					height: calculateRem(15px);
					background: rgba(255,255,255,.6);
					position: absolute;
					bottom: calculateRem(-15px);
					left: calculateRem(15px);
				}
				>img{
					width: 100%;
					height: 100%;
				}
			}
		}
		
	}


}




